<template>
  <div class="container-a">
    <div class="cw2">
      <transition-group name="fade">
        <div class="s-wrap2" v-if="!sw" :key="1">
          <div class="s-wrap">
            <div class="search-m">
              <input type="text" placeholder="请输入搜索关键字" class="s-input" v-model="keywords">
            </div>
            <div class="s-c" @click="sw=!sw">取消</div>
          </div>
          <div class="s-list">
            <scroller
              ref="scroller"
              :on-refresh="refresh">
              <div class="r-wrap">
                <ul class="r-wrap-ul">
                  <li v-for="i in searchList" @click="checkList(i)">
                    <div class="circle-t b-b">
                      {{i.f}}
                    </div>
                    <div class="b-f content">
                      <div class="c-n-1">
                        {{i.c}}
                      </div>
                      <div class="people-time">
                        {{i.p}}&nbsp;&nbsp;{{i.t | dateFormat}}
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </scroller>
          </div>
        </div>
        <div :key="2" v-show="sw" class="wrap2">
          <div class="s-wrap">
            <div class="search-m" @click="sw=!sw">搜索</div>
          </div>
          <div class="wrap2">
            <scroller
              ref="scroller2"
              :on-refresh="refresh">
              <div class="r-wrap">
                <ul class="r-wrap-ul">
                  <li v-for="i in rList" @click="checkList(i)">
                    <div class="circle-t b-b">
                      {{i.f}}
                    </div>
                    <div class="b-f content">
                      <div class="c-n-1">
                        {{i.h}}
                      </div>
                      <div class="c-n-1 people-time">
                        {{i.c}}
                      </div>
                      <div class="people-time">
                        {{i.p}}&nbsp;&nbsp;{{i.t | dateFormat}}
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </scroller>
          </div>
        </div>
      </transition-group>
    </div>
    <transition enter-class="slide-left-enter" leave-active-class="slide-left-leave">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  import inbox from "./inbox.js"
  export default inbox
</script>

<style scoped lang="scss">
  @import "../../css/common.scss";
  @import "inbox.scss";
</style>
